<template>
  <el-dialog
    :close-on-click-modal="false"
    :key="dialogProps.name"
    v-model="isShowd"
    overflow
    append-to-body
    :title="dialogProps.title"
    width="40%"
  >
    <div>
      <el-form
        ref="form"
        :model="formData"
        label-width="120"
        :size="props.dialogProps.size"
        class="max-height"
      >
        <template v-for="item in dialogProps.propsList" :key="item.prop">
          <el-form-item :label="item.label" :prop="item.prop">
            <template v-if="item.type == 'select'" style="width: 100%">
              <el-select
                :disabled="isDsabled"
                v-model="formData[item.prop]"
                placeholder="选择部门"
                style="width: 100%"
              >
                <el-option
                  v-for="target in item.options"
                  :key="target.key"
                  style="width: 100%"
                  :label="target.value"
                  :value="target.key"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="item.type == 'custom'">
              <slot
                :name="item.slotName"
                v-bind="formData"
                :props="item"
              ></slot>
            </template>
            <template v-else-if="item.type == 'dispose'">
              <el-select
                :disabled="isDsabled"
                v-model="formData[item.prop]"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="target in item.options"
                  :key="target.key"
                  style="width: 100%"
                  :label="target.value"
                  :value="target.key"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="item.type == 'slot'">
              <h4 class="boxslot">{{ item.text }}</h4>
            </template>
            <template v-else-if="item.type == 'upload'">
              <el-upload
                :disabled="isDsabled"
                class="upload"
                action="#"
                v-model:file-list="fileList"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="handleUpload"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </template>
            <template v-else>
              <el-input
                :disabled="isDsabled"
                v-model="formData[item.prop]"
                :placeholder="item.placeholder"
              ></el-input>
            </template>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShowd = false">关闭</el-button>
        <!-- <el-button type="primary" @click="submit" color="#467eff">
          确定
        </el-button> -->
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" style="width: 100%" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import type { UploadProps } from "element-plus"
import {  upload } from "@/api/product"

let form = ref()
let isDsabled = ref(false)

/* 文件上传 */

const fileList = ref<any[]>([])

const dialogImageUrl = ref("")
const dialogVisible = ref(false)

const handleRemove: UploadProps["onRemove"] = () => {
}

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const handleUpload = (file:any) => {
  let imgParams = {
    attachmentAliasName: "",
    attachmentName: "",
    attachmentUri: "",
    attachmentType: ""
  }
  let fd = new FormData()
  fd.append("file", file.file)
  fd.append("param", JSON.stringify({ module: "product", type: "banner" }))
  upload(fd).then((res) => {
    let { data } = res
    fileList.value.push({
      name: data.attachmentName,
      url: data.attachmentUri
    })
    imgParams.attachmentName = data.attachmentName
    imgParams.attachmentUri = data.attachmentUri
    imgParams.attachmentAliasName = data.attachmentAliasName
    imgParams.attachmentType = file.file.type
  })
}
// 取配置项值
interface Iprops {
  info?: any
  dialogProps: {
    name?: string
    size?: string
    propsList: any[]
    labelwidth: string
    title?: string
  }
}
const props = defineProps<Iprops>()
let formData = reactive<any>({})
let isShowd = ref(false)
const editCenterDialogVisible = () => {
  // 做拦截
  isShowd.value = !isShowd.value
}
const emit = defineEmits(["submitClick"])
// const submit = async () => {
//   emit("submitClick", formData)
// }

// 对外暴露编辑处理函数
const handEcho = (bol: boolean, roleData?: any) => {
  isShowd.value = bol
  isDsabled.value = bol
  nextTick(() => {
    for (let key in roleData) {
      if (roleData.hasOwnProperty(key)) {
        formData[key] = roleData[key]
      }
    }
    if (
      roleData.productAttachmentList &&
      roleData.productAttachmentList.length !== 0
    ) {
      fileList.value = [
        {
          url: roleData.productAttachmentList[0].attachmentUri
        }
      ]
    }
  })
}

watch(
  () => isShowd.value,
  (old) => {
    if (old == false) {
      form.value?.resetFields()
      isDsabled.value = false
      fileList.value = []
    }
  }
)
defineExpose({
  editCenterDialogVisible,
  handEcho
})
</script>

<style lang="scss" scope>
.max-height{
  max-height: 600px;
  overflow: auto;
}
.el-dialog__body {
  max-height: none !important;
  overflow: auto !important;
}
.modal {
  padding: 0 20px;
}
.el-selsect {
  width: 100% !important;
}
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  // background-color: skyblue;
}
.el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}
.boxslot {
  margin-left: -100px;
}
</style>
